/**
 * 目标1：渲染图书列表
 *  1.1 获取数据
 *  1.2 渲染数据
 */
const creator = '星胖胖'   //参数
function getBooks() {
    axios({   //获取数据  get 请求
        url: 'http://hmajax.itheima.net/api/books',
        // 默认get请求  params
        params: {
            creator
        }
    }).then(res => {
        const list = res.data.data
        const newList = list.map(function ({ id, bookname, author, publisher }, index) {
            return `
          <tr>
          <td>${index + 1}</td>
          <td>${bookname}</td>
          <td>${author}</td>
          <td>${publisher}</td>
          <td>
            <span class="del" data-index='${id}'>删除</span>
            <span class="edit" data-index='${id}'>编辑</span>
          </td>
        </tr>
            `
        })
        document.querySelector('.list').innerHTML = newList.join('')

    })
} getBooks()


/**
 * 目标2：新增图书
 *  2.1 新增弹框->显示和隐藏
 *  2.2 收集表单数据，并提交到服务器保存
 *  2.3 刷新图书列表
 */

const btn = document.querySelector('.add-btn')

const add = document.querySelector('.add-modal')
const modal = new bootstrap.Modal(add)  //直接会显示
btn.addEventListener('click', function () {
    // 添加功能
    // 获取添加from表单
    const addFrom = document.querySelector('.add-form')
    const formObj = serialize(addFrom, { hash: true, empty: true })
    console.log(formObj);
    // 少了一个作者  常看上面的fromObj格式`

    // 使用axios发送请求
    axios({
        url: 'http://hmajax.itheima.net/api/books',
        method: 'POST',
        // 少一个参数 creator:creator==>省略   使用展开运算符
        data: { ...formObj, creator }
    }).then(res => {
        addFrom.reset()
        // 关闭弹层
        modal.hide()
        getBooks()
    }).catch(err => {
        console.log(err);
    })
})




/**
 * 目标3：删除图书
 *  3.1 删除元素绑定点击事件->获取图书id
 *  3.2 调用删除接口
 *  3.3 刷新图书列表
 */
const list = document.querySelector('.list')

const edit = document.querySelector('.edit-modal')
const modalEdit = new bootstrap.Modal(edit)
let editId   //当前编辑项的id  
list.addEventListener('click', function ({ target: { classList, dataset: { index } } }) {
    // 获取到本地id
    const id = +index
    // console.log(this);
    if (classList.contains('del')) {
        //    获取到数据
        axios({
            url: `http://hmajax.itheima.net/api/books/${id}`,
            method: 'DELETE',
        }).then(res => {
            console.log(res);
            getBooks()
        }).catch(error => console.log(error))

    }

    if (classList.contains('edit')) {
        editId = id
        // 获取数据get
        axios({
            url: `http://hmajax.itheima.net/api/books/${id}`   //路径传参
        }).then((res) => {
            console.log(res);
            const { bookname, author, publisher } = res.data.data
            console.log(bookname);
            console.log(author);
            console.log(publisher);
            // 给表单赋值
            document.querySelector('.edit-form .bookname').value = bookname
            document.querySelector('.edit-form .author').value = author
            document.querySelector('.edit-form .publisher').value = publisher
            modalEdit.show()
        })
    }
})

// 



/**
 * 目标4：编辑图书
 *  4.1 编辑弹框->显示和隐藏
 *  4.2 获取当前编辑图书数据->回显到编辑表单中
 *  4.3 提交保存修改，并刷新列表
 */

// 给保存绑定点击事件  进行修改
document.querySelector('.edit-btn').addEventListener('click', function () {
    const editForm = document.querySelector('.edit-form')
    const formObj = serialize(editForm, { hash: true, empty: false })
    axios({
        url: `http://hmajax.itheima.net/api/books/${editId}`,
        method: 'PUT',
        data: { ...formObj, creator }
    }).then((res) => {
        console.log(res);
        // 清空表单  关闭弹层 渲染页面
        editForm.reset()
        modalEdit.hide()
        getBooks()

    }).catch(err => alert(err))

})
// 获取数据  拿到所有表单的数据
// 发送请求 更新数据  PUT请求


// 查询参数  ？键值对  直接后面拼接
//放在请求体里面
// 路径传参   参数的值放到路径后面
// 请求头  项目阶段



